<template>
<div v-if="list.length" @click="showInfo" class="content">
    <vue-seamless-scroll :key="'timeKey'" :data="list" :class-option="scrollOption" class="info">
        <ul>
            <li v-for="item in list" :key="item.title">{{ item.title }}</li>
        </ul>
    </vue-seamless-scroll>
</div>
<div v-else class="empty">暂无数据</div>
</template>
<script lang="ts" setup>
import vueSeamlessScroll from 'vue-seamless-scroll'
import {ref} from 'vue'

let list = ref([
    {
        title:'测试数据0',
    },
    {
        title:'测试数据1',
    },
    {
        title:'测试数据2',
    },
    {
        title:'测试数据3',
    },
    {
        title:'测试数据4',
    },
    {
        title:'测试数据5',
    },
    {
        title:'测试数据6',
    },
    {
        title:'测试数据7',
    },
])
const scrollOption = {
    step: 0.5, // 数值越大速度滚动越快
    limitMoveNum: 6, // 开始无缝滚动的数据量 this.list.length+1
    hoverStop: true, // 是否开启鼠标悬停stop
    direction: 1, // 0向下 1向上 2向左 3向右
    openWatch: true, // 开启数据实时监控刷新dom
    singleHeight: 21, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    waitTime: 2500 // 单步运动停止的时间(默认值1000ms)
}
const showInfo = (e)=> {
  let idx = e.target.parentNode.dataset.index;
  console.log(list.value[idx]) //点击行数据
  // e：鼠标事件，e.target：点击元素(<td>)，e.target.parentNode：点击元素父元素(<tr>)，e.target.parentNode.dataset：自定义属性位置
}
</script>

<style lang="scss" scoped>
</style>